<template>
    <div>
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus">新增</el-button>
        <el-input placeholder="请输入名称" v-model="keywords" class="inputSuffix">
            <el-button slot="append" type="primary" icon="el-icon-search" class="searchBtn" @click="searchBtn"></el-button>
        </el-input>
        <!-- 查询 -->
        <!-- 搜索 -->
        <!-- 表格 -->
        <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading">
            <el-table-column fixed type="index" label="*" sortable  min-width="40"></el-table-column>
            <el-table-column prop="name" label="名称"  sortable min-width="100"></el-table-column>
            <el-table-column prop="code" label="编码"  sortable show-overflow-tooltip min-width="160"></el-table-column>
            <el-table-column prop="type" label="型号" sortable min-width="85"></el-table-column>
            <!-- <el-table-column prop="texture" label="材质" sortable  min-width="120"></el-table-column>
            <el-table-column prop="no" label="损耗系数" sortable  min-width="90"></el-table-column> -->
            <el-table-column prop="managerLevel" label="管理等级"  sortable min-width="90"></el-table-column>
            <el-table-column prop="enable" label="启用" sortable  width="80">
                <template slot-scope="scope">
                     <span :class="scope.row.enable===1?'el-icon-circle-check cl-success':'el-icon-error cl-danger'" class="icon-circle"></span>
                </template>
            </el-table-column>
            <el-table-column prop="creatorName" label="创建人"  sortable min-width="90"></el-table-column>
             <el-table-column prop="createTime" label="创建时间" sortable  min-width="90"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
                     <el-button @click="showDialog1(scope.row)" type="text" size="mini">关联供应商</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->

        <el-dialog :title="dialog.title" width="800px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
             <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="150px" :model="dialog.formDate">
                <el-form-item label="名称">
                    <el-input v-model="dialog.formDate.name"></el-input>
                </el-form-item>
                <el-form-item label="物料编码">
                    <el-input v-model="dialog.formDate.code"></el-input>
                </el-form-item>
                <el-form-item label="物料型号">
                    <el-input v-model="dialog.formDate.type"></el-input>
                </el-form-item>
                <!-- <el-form-item label="材质">
                    <el-input v-model="dialog.formDate.texture"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="损耗系数">
                    <el-input v-model="dialog.formDate.no"></el-input>
                </el-form-item> -->
                <el-form-item label=" 管理等级">
                    <el-select v-model="dialog.formDate.managerLevel" class="inputSuffix">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch class="inputSuffix"  v-model="dialog.formDate.enable" active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="创建人" v-if="dialog.title.indexOf('编辑')>-1">
                    <el-input v-model="dialog.formDate.creatorName" disabled></el-input>
                </el-form-item>
                <el-form-item label="创建时间" v-if="dialog.title.indexOf('编辑')>-1">
                    <el-input v-model="dialog.formDate.createTime" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>
         <el-dialog :title="dialog1.title" width="1000px" center :visible.sync="dialog1.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-button type="success" @click="showDialog2('insert')" icon="el-icon-plus">新增</el-button>
            <el-table :data="dialog1.dataList" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :max-height="tableHeight"
        :header-cell-style="getRowClass" >
                <el-table-column fixed type="index" label="*"  min-width="40" align="center"></el-table-column>
                <el-table-column prop="lxcgSupplier.name" label="供应商名字" show-overflow-tooltip  min-width="120" align="center"></el-table-column>
                <el-table-column prop="minPurchase" label="最小采购量"   min-width="80" align="center"></el-table-column>
                <el-table-column prop="predate" label="采购提前期"  min-width="80" align="center"></el-table-column>
                <el-table-column prop="price" label="单价"  min-width="100" align="center"></el-table-column>
                <el-table-column prop="creatorName" label="创建人"  min-width="100" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"  min-width="100" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button @click="showDialog2('update',scope.row)" type="text" size="mini">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog :title="dialog2.title" width="750px" center :visible.sync="dialog2.isShow" :close-on-click-modal="false" v-dialogDrag>
            <div :style="tableDialogHeightTabPane">
            <el-form :inline="true" class="demo-form-inline" v-model="dialog2.fromData" label-position="right" label-width="120px">
                <el-form-item label="物料名称" ><el-input v-model="dialog1.materiel.name" disabled></el-input></el-form-item>
                <el-form-item label="物料型号" ><el-input v-model="dialog1.materiel.type" disabled></el-input></el-form-item>
                <el-form-item label="供应商名称">
                    <el-autocomplete  class="autocomplete-row" v-model="dialog2.fromData.supplierName" :fetch-suggestions="querySearchAsync" placeholder="请输入供应商名称" @select="handleSelect"></el-autocomplete>
                </el-form-item>
                <el-form-item label="采购提前期">
                    <el-input v-model="dialog2.fromData.predate" class="inputSuffix">
                        <el-button slot="append">天</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="最小采购量"><el-input v-model="dialog2.fromData.minPurchase" ></el-input></el-form-item>
                <el-form-item label="单价">
                    <el-input v-model="dialog2.fromData.price" class="inputSuffix"><el-button slot="append">元</el-button></el-input>
                </el-form-item>
                <el-form-item label="创建人" v-if="dialog2.title==='修改供应商列表'"><el-input v-model="dialog2.fromData.creatorName" disabled></el-input></el-form-item>
                <el-form-item label="创建时间" v-if="dialog2.title==='修改供应商列表'"><el-input v-model="dialog2.fromData.createTime" disabled></el-input></el-form-item>
            </el-form>
                </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList2" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import lxcgHttp from '@/axios/lxcgHttp.js'
export default {
    data(){
        return {
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            keywords:'',
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{
                title:'',
                isShow:false,
                formDate:{
                }
            },
            dialog1:{
                title:'',
                isShow:false,
                dataList:[],
                materiel:{}
            },
            dialog2:{
                 title:'',
                isShow:false,
                fromData:{}
            }
        }
    },
    created(){
        let  self = this;
        self.getTableList()
    },
    methods:{
        getTableList(){
            let self = this,
            data={
               currentPage:self.pagination.currentPage,
               pageSize:self.pagination.pageSize,
               name:self.keywords
            };
            lxcgHttp.lxMaterialList(data).then(res=>{
                self.tabaleData=res.content.records
                self.pagination.total = res.content.total;
            })
        },
        searchBtn(){
            this.pagination.currentPage=1;
            this.getTableList();
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getTableList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getTableList();
        },
        isShowDialog(type,row){
            let self = this;
            self.dialog.title = type==='insert'?'新增':'编辑';
            self.dialog.isShow = true;
            self.dialog.formDate= type==='insert'?{}:row;
        },
        submitList(){
            let self = this;
            let type = self.dialog.title.indexOf("新增") > -1 ? "insert" : "update";
            lxcgHttp.addUpdateLxcgMaterial(type, self.dialog.formDate).then(res => {
                self.$message.success(`${self.dialog.title}成功`);
                self.dialog.isShow = false;
                self.getTableList();
            },error => {
                self.$message.error(`${self.dialog.title}失败`);
            });
        },
        showDialog1(row){
            let self = this;
            self.dialog1.title='关联供应商列表';
            self.dialog1.isShow=true;
            self.dialog1.materiel=row;
            self.getLinlSupplier();

        },
        showDialog2(type,row){
            let self = this;
            self.dialog2.title=`${type==='insert'?'新增':'修改'}关联供应商`;
            self.dialog2.isShow=true;
            self.dialog2.fromData = type==='insert'?{}:{
                bid: row.bid,
                minPurchase: row.minPurchase,
                predate:row.predate,
                price: row.price,
                sid:row.sid,
                supplierName: row.lxcgSupplier.name,
                createTime: row.createTime,
                creatorName: row.creatorName
            };
        },
        getLinlSupplier(){
            let self = this;
            lxcgHttp.lxcgMaterialLinkSupplierList(self.dialog1.materiel.id).then(res=>{
                self.dialog1.dataList = res.content;
            })
        },
        submitList2(){
            let self = this;
            let type = self.dialog2.title.indexOf('新增')>-1?'insert':'update';
            let data={
                sid:self.dialog2.fromData.sid,
                bid:self.dialog2.title.indexOf('新增')>-1?self.dialog1.materiel.id:self.dialog2.fromData.bid,
                minPurchase: self.dialog2.fromData.minPurchase,
                predate: self.dialog2.fromData.predate,
                price: self.dialog2.fromData.price
            }
            lxcgHttp.addUpdateLxcgMaterialLinkSupplier(type,self.dialog2.fromData).then(res=>{
                self.dialog2.isShow=false;
                self.$message.success(`${self.dialog2.title}成功`);
                self.getLinlSupplier();
            })
        },
        querySearchAsync(queryString, callback){
            let self = this;
            lxcgHttp.lxSupplierSearch({name:queryString}).then(res=>{
                res.content.forEach(element => {
                    element.value = element.name;
                });
                callback(res.content)
            })
        },
        handleSelect(item){
            this.dialog2.fromData.sid = item.id;
            this.dialog2.fromData.supplierName = item.value;
        }
    }
}
</script>
<style scoped>
.icon-circle{
    line-height: 100%;
    font-size:18px;
}
</style>
